<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排行榜</title>
  <link rel="stylesheet" href="styles/icon.css">
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>
  <div class="page">
    <!-- 顶部标题和主标签 -->
    <header class="top">
      <div class="top-title">排行榜</div>
      <nav class="main-tabs">
        <div class="tab-item tab-active">好文精选</div>
        <div class="tab-item">热门资讯</div>
      </nav>
      <div class="category-tab">
        <span>文章</span>
      </div>
    </header>
    
    <!-- 文章列表容器 -->
    <main class="content-container">
      <!-- 好文精选文章列表 -->
      <div class="article-list" id="recommended-list">
        <!-- 文章1 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 1</div>
          <div class="article-content">
            <div class="article-title">庵野秀明编剧, 机甲激战一触即发!</div>
            <div class="article-image">
              <img src="imgs/高达.jpg" alt="GUQxxxx" />
            </div>
            <div class="article-tag">
              <span># 高达</span>
              <span># 机战</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 105</span>
              <span><i class="iconfont icon-love"></i> 345</span>
            </div>
          </div>
        </a>

        <!-- 文章2 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 2</div>
          <div class="article-content">
            <div class="article-title">洛天依全国巡演回放, 正式上线!</div>
            <div class="article-image">
              <img src="imgs/洛天依.png" alt="洛天依演唱会" />
            </div>
            <div class="article-tag">
              <span># 洛天依</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 203</span>
              <span><i class="iconfont icon-love"></i> 421</span>
            </div>
          </div>
        </a>
        
        
        <!-- 文章3 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 3</div>
          <div class="article-content">
            <div class="article-title">【JOJO吃鸡神仙版】人终究是要上天堂的啊，在各式神仙的战场中加速时间</div>
            <div class="article-image">
              <img src="imgs/JOJO.jpg" alt="JOJO吃鸡" />
            </div>
            <div class="article-tag">
              <span># JOJO吃鸡</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 151</span>
              <span><i class="iconfont icon-love"></i> 132</span>
            </div>
          </div>
        </a>
        
        <!-- 文章4 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 4</div>
          <div class="article-content">
            <div class="article-title">[wota艺]台风天就要打又三郎!</div>
            <div class="article-image">
              <img src="imgs/又三郎.jpg" alt="又三郎" />
            </div>
            <div class="article-tag">
              <span># wota艺</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 89</span>
              <span><i class="iconfont icon-love"></i> 256</span>
            </div>
          </div>
        </a>

        <!-- 文章5 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 5</div>
          <div class="article-content">
            <div class="article-title">SBR动画化pv, 但是漫画分镜对比</div>
            <div class="article-image">
              <img src="imgs/彪马野郎pv.jpg" alt="SBR动画化" />
            </div>
            <div class="article-tag">
              <span># SBR动画化</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 178</span>
              <span><i class="iconfont icon-love"></i> 369</span>
            </div>
          </div>
        </a>
      </div>

      <!-- 热门资讯文章列表 (初始隐藏) -->
      <div class="article-list" id="hot-news-list" style="display: none;">
        <!-- 热门文章1 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 1</div>
          <div class="article-content">
            <div class="article-title">年度动画盘点: 2023最值得一看的机甲动画</div>
            <div class="article-image">
              <img src="imgs/高达.jpg" alt="机甲动画" />
            </div>
            <div class="article-tag">
              <span># 动画</span>
              <span># 机甲</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 521</span>
              <span><i class="iconfont icon-love"></i> 1324</span>
            </div>
          </div>
        </a>

        <!-- 热门文章2 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 2</div>
          <div class="article-content">
            <div class="article-title">虚拟偶像产业分析: 洛天依现象背后的商业逻辑</div>
            <div class="article-image">
              <img src="imgs/洛天依.png" alt="洛天依" />
            </div>
            <div class="article-tag">
              <span># 虚拟偶像</span>
              <span># 音乐</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 345</span>
              <span><i class="iconfont icon-love"></i> 890</span>
            </div>
          </div>
        </a>

        <!-- 热门文章3 -->
        <a href="#" class="article-item">
          <div class="article-rank">TOP 3</div>
          <div class="article-content">
            <div class="article-title">JOJO系列最新作: 石之海动画化正式公布</div>
            <div class="article-image">
              <img src="imgs/JOJO.jpg" alt="JOJO石之海" />
            </div>
            <div class="article-tag">
              <span># 动漫</span>
              <span># JOJO</span>
            </div>
            <div class="article-stats">
              <span><i class="iconfont icon-comment"></i> 289</span>
              <span><i class="iconfont icon-love"></i> 765</span>
            </div>
          </div>
        </a>
        
      </div>
    </main>
  
  <script src="scripts.js"></script>
</body>
</html>